<template>
  <div class="main">
    <div class="banner">
      <img src="../assets/images/gsjj-banner.png" alt="" />
    </div>
    <div class="center">
      <router-link
        class="item"
        v-for="(item, index) in newsData"
        :key="index"
        :to="{ name: 'briefDetail', query: { id: item.id } }"
      >
        <div class="lf">
          <div class="b">{{item.create_time[2]}}</div>
          <div class="s">{{item.create_time[0]}}/{{item.create_time[1]}}</div>
        </div>
        <div class="rt">
          <h1>{{item.title}}</h1>
          <p v-html="item.content"></p>
        </div>
      </router-link>
      <!-- 分页 -->
      <el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newsData:[]
    }
  },
  created () {
    this.$http.getNews().then((res)=>{
      if (res.data.code === 0) {
        const data = res.data.data
        data.map((item) => {
          item.create_time = item.create_time.replace(' ', ':').replace(/:/g, '-').split('-')
        })
        this.newsData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.banner {
  max-width: 1920px;
  height: 700px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }
}
.center {
  max-width: 1200px;
  margin: 0 auto;
  font-family: PingFang SC;
  padding: 50px 0;
  .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    .lf {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 118px;
      height: 131px;
      background: #c5d0dd;
      .b {
        font-size: 48px;
        font-weight: 400;
        color: #999999;
      }
      .s {
        font-size: 24px;
        font-weight: 400;
        color: #999999;
      }
    }
    .rt {
      width: 1050px;
      height: 131px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h1 {
        font-size: 32px;
        font-weight: bold;
        line-height: 30px;
        color: #333333;
      }
      p {
        font-size: 24px;
        font-weight: 400;
        line-height: 33px;
        color: #999999;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  ::v-deep {
    .el-pagination {
      font-family: PingFang SC;
      text-align: right;
      .btn-next,
      .btn-prev,
      .el-dialog,
      .el-pager li,
      .btn-next .el-icon,
      .btn-prev .el-icon {
        background: none;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .el-pager li.active {
        font-size: 24px;
        font-weight: bold;
        color: #2a3444;
      }
    }
  }
}
</style>